﻿@using Kairos.Models
@using Kairos.Views

@model IEnumerable<Kairos.Models.Mappage>

@{
    ViewBag.Title = "Mappages";
}

<h2>@ViewBag.Titre - @ViewBag.Title</h2>

@if (Model.Count() == 0)
{
    <p>
        Aucun mappage défini
    </p>
}
else
{ 
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Titre)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Position)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Lien)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Titre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Position)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Lien)
            </td>
            <td>
                @using (Html.BeginForm("Delete", "Mappage", new { id = item.ID, grapheID = ViewBag.ID }, FormMethod.Post, new
                {
                    onsubmit = "return confirm('Le mappage sera supprimé définitivement.')"
                }))
                {
                    @Html.AntiForgeryToken()
                    @Html.ActionLink("Editer", "Edit", new { id = item.ID, grapheID = ViewBag.ID })
                    <input type="submit" value="Supprimer" class="actionlink" />
                }
            </td>
        </tr>
    }

</table>
}

<hr />

<table class="props">
    <tr>
        <td>
            <div>
                @Html.ButtonLink("Revenir au graphe", "Details", "Graphe", new { id = ViewBag.ID }, new { @class = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" })
            </div>
        </td>
        <td align="right">
            <div>
                @Html.ButtonLink("Nouveau mappage", "Create", new { id = 0, grapheID = ViewBag.ID }, new { @class = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" })
            </div>
        </td>
    </tr>
</table>

<table>
    <tr>
        <th>
            Aperçu
        </th>
    </tr>
</table>

<div class="rich-text" style="height:auto;">
    @Html.ImageMap((Image)ViewBag.Image, (ICollection<Mappage>)Model)
</div>

<div id="mousecoords" class="rich-text" style="height:16px;border-top:0;padding:2px;padding-left:10px;">&nbsp;</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/maphilight")

    @*http://davidlynch.org/projects/maphilight/docs/*@

    <script>
        $('img[usemap]')
            .maphilight({ alwaysOn: true })
            .mousemove(function (e) {
                var imgOffset = $(this).offset();
                var relX = e.pageX - imgOffset.left;
                var relY = e.pageY - imgOffset.top;
                $("#mousecoords").html("x = " + Math.round(relX) + " ; y = " + Math.round(relY));
            });

        $('area')
            .mousemove(function (e) {
                var imgOffset = $('img[usemap]:first').offset();
                var areaOffset = $(this).parent().parent().offset();
                var relX = e.pageX - areaOffset.left - (imgOffset.left - areaOffset.left);
                var relY = e.pageY - areaOffset.top - (imgOffset.top - areaOffset.top);
                $("#mousecoords").html("x = " + Math.round(relX) + " ; y = " + Math.round(relY));
            });
    </script>
}
